import React from 'react';
import {StyleSheet, View} from 'react-native';
import Toast from 'react-native-easy-toast';

import api from '../../../common/api';
import auth from '../../../common/auth';

import ListItem from '../../../components/listItem';
import List from '../../../components/list';
import Header from '../../../components/header';
import Loading from '../../../components/loading';

export default class extends React.Component {
    state = {
        uid: 0,
        list: [],
        page: 1,
        page_size: 20,
        isFetching: false,
        refreshing: false,
        hasMore: true
    };

    //获取数据
    getData = isRefresh => {
        let {isFetching, refreshing, page, page_size, list, uid, hasMore} = this.state;
        page = isRefresh ? 1 : page;
        if (isFetching || !hasMore || refreshing) {
            return;
        }
        if (isRefresh) {
            this.setState({
                refreshing: true
            });
        } else {
            this.setState({
                isFetching: true
            });
        }
        api({url: 'api/item/getCollectionList', data: {page, page_size, member_id: uid, flag: 0}})
            .then(data => {
                this.setState({
                    list: isRefresh ? data : [...list, ...data],
                    page: page + 1,
                    hasMore: data.length >= page_size
                });
            })
            .catch(e => {
                this.showToast(e.msg);
            })
            .finally(() => {
                this.setState({
                    isFetching: false,
                    refreshing: false
                });
            });
    };

    showToast = text => {
        this.refs.toast.show(text);
    };

    componentDidMount() {
        auth.getUserInfo()
            .then(userInfo => {
                this.setState({
                    uid: userInfo.id
                }, () => {
                    this.getData();
                });
            })
            .catch(() => {
                auth.goBack();
            });
    }

    render() {
        const {list, hasMore, isFetching, refreshing} = this.state;
        return (
            <View style={styles.container}>
                <Header title="我的收藏" wrapperStyle={{marginBottom: 1}}/>
                <List
                    list={list}
                    numColumns={1}
                    isFetching={isFetching}
                    hasMore={hasMore}
                    refreshing={refreshing}
                    endReachedFn={() => {
                        this.getData(false);
                    }}
                    refreshFn={() => {
                        this.getData(true);
                    }}
                    renderItem={({item}) => {
                        return <ListItem type="single" item={item}/>
                    }}
                    ItemSeparatorComponent={() => <View style={{height: 1}}/>}
                />
                <Loading isLoading={list.length === 0 && isFetching}/>
                <Toast ref="toast" position="center"/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1
    }
});
